<template>
  <view class="body">
    <!-- <view class="notice_bar" @tap="fixData"
      >根据当前的健康数据进行生成，若需补充数据请点击
      <image class="img_more" src="@/static/image/raozg/orange_more.png" />
    </view> -->
    <view class="img_bg"></view>
    <view class="top_tip">
      <image class="top_bg" src="https://ainengli.hzjrsw.com/jkhx/baseInfo.png" />
      <view class="switch" @tap="visitFun">
        <text class="switch_text">其他就诊人</text>
        <image class="switch_img" src="@/static/image/raozg/white_more.png" />
      </view>
      <view class="base_info">
        <image
          v-if="patientInfo.gender == '女性'"
          class="avatar"
          src="@/static/image/hmm/woman.png"
        />
        <image v-else class="avatar" src="@/static/image/hmm/man.png" />
        <view class="right_info">
          <view class="baseinfo">
            <text class="name">{{ patientInfo.patName }}</text>
            <text v-if="patientInfo.relation" class="relation">{{ patientInfo.relation }}</text>
            <text class="sex">{{ patientInfo.gender }}</text>
            <text class="age">{{ patientInfo.age }}岁</text>
          </view>
          <view class="idcard">证件号 I {{ patientInfo.idNo }}</view>
          <view class="more" @tap="moreFun">
            <view class="more_text">更多信息</view>
            <image class="more_img" src="@/static/image/raozg/green_more.png" />
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="questionnaire" @tap="toQuestion">
      <image class="question_img" src="https://ainengli.hzjrsw.com/jkhx/questionnaire.png" />
    </view> -->
    <view class="record">
      <view class="tab">
        <view class="title">健康画像</view>
        <!-- <view class="source">数据来源: 美联医院</view> -->
      </view>
      <view class="body_modal">
        <image
          v-if="patientInfo.gender == '女性'"
          class="img_body"
          src="https://ainengli.hzjrsw.com/jkhx/women_modal.png"
        />
        <image v-else class="img_body" src="https://ainengli.hzjrsw.com/jkhx/man_modal.png" />
        <view v-if="systemList.length > 0" class="tags">
          <!-- <view v-for="(item, index) in 14" :key="index" class="tag_item" @tap="openModal(item)">
                        <view class="tag_name">{{ item.name }}</view>
                    </view> -->
          <image
            v-if="systemList[0].list.length > 0"
            @tap="openModal(0)"
            class="tag_img tag_name0"
            src="https://ainengli.hzjrsw.com/jkhx/system1.png"
          />
          <image
            v-if="systemList[1].list.length > 0"
            @tap="openModal(1)"
            class="tag_img tag_name1"
            src="https://ainengli.hzjrsw.com/jkhx/system2.png"
          />
          <image
            v-if="systemList[2].list.length > 0"
            @tap="openModal(2)"
            class="tag_img tag_name2"
            src="https://ainengli.hzjrsw.com/jkhx/system3.png"
          />
          <image
            v-if="systemList[3].list.length > 0"
            @tap="openModal(3)"
            class="tag_img tag_name3"
            src="https://ainengli.hzjrsw.com/jkhx/system4.png"
          />
          <image
            v-if="systemList[4].list.length > 0"
            @tap="openModal(4)"
            class="tag_img tag_name4"
            src="https://ainengli.hzjrsw.com/jkhx/system5.png"
          />
          <image
            v-if="systemList[5].list.length > 0"
            @tap="openModal(5)"
            class="tag_img tag_name5"
            src="https://ainengli.hzjrsw.com/jkhx/system6.png"
          />
          <image
            v-if="systemList[6].list.length > 0"
            @tap="openModal(6)"
            class="tag_img tag_name6"
            src="https://ainengli.hzjrsw.com/jkhx/system7.png"
          />
          <image
            v-if="systemList[7].list.length > 0"
            @tap="openModal(7)"
            class="tag_img tag_name7"
            src="https://ainengli.hzjrsw.com/jkhx/system8.png"
          />
          <image
            v-if="systemList[8].list.length > 0"
            @tap="openModal(8)"
            class="tag_img tag_name8"
            src="https://ainengli.hzjrsw.com/jkhx/system9.png"
          />
          <image
            v-if="systemList[9].list.length > 0"
            @tap="openModal(9)"
            class="tag_img tag_name9"
            src="https://ainengli.hzjrsw.com/jkhx/system10.png"
          />
          <image
            v-if="systemList[10].list.length > 0"
            @tap="openModal(10)"
            class="tag_img tag_name10"
            src="https://ainengli.hzjrsw.com/jkhx/system11.png"
          />
          <image
            v-if="systemList[11].list.length > 0"
            @tap="openModal(11)"
            class="tag_img tag_name11"
            src="https://ainengli.hzjrsw.com/jkhx/system12.png"
          />
          <image
            v-if="systemList[12].list.length > 0"
            @tap="openModal(12)"
            class="tag_img tag_name12"
            src="https://ainengli.hzjrsw.com/jkhx/system13.png"
          />
          <image
            v-if="systemList[13].list.length > 0"
            @tap="openModal(13)"
            class="tag_img tag_name13"
            src="https://ainengli.hzjrsw.com/jkhx/system14.png"
          />
        </view>
      </view>
    </view>
    <up-popup :show="show" :round="16" mode="bottom" closeable @close="show = false">
      <view class="title">{{ popTitle }}疾病（{{ diseaseList.length }}）</view>
      <view class="lists">
        <view
          v-for="(item, index) in diseaseList"
          :key="index"
          :class="[
            'item',
            item.riskLevel == 'C'
              ? 'low'
              : item.riskLevel == 'B'
              ? 'high'
              : item.riskLevel == 'C1'
              ? 'middle'
              : 'active'
          ]"
        >
          <view class="line"></view>
          <view class="name">{{ item.labelName }}</view>
          <view class="tag">{{
            item.riskLevel == 'C'
              ? '低风险'
              : item.riskLevel == 'B'
              ? '高风险'
              : item.riskLevel == 'C1'
              ? '中风险'
              : '确诊'
          }}</view>
        </view>
      </view>
    </up-popup>
    <up-popup :show="show2" :round="16" mode="bottom" closeable @close="show2 = false">
      <view class="title">选择就诊人</view>
      <view class="lists_patient">
        <view
          v-for="(item, index) of patientList"
          :key="index"
          @click="select(item)"
          :class="['item', patientInfo.empi == item.empi ? 'active' : '']"
        >
          <view class="name">{{ item.patName }}</view>
          <view class="num">{{ item.gender }} | {{ item.age }}岁</view>
          <image
            v-if="patientInfo.empi == item.empi"
            class="select_img"
            src="@/static/image/raozg/select.png"
          />
        </view>
      </view>
    </up-popup>
    <!-- <view class="fixed">
      <button class="confirm_btn" @tap="toHealthManage">我的健康管理方案</button>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { label_list, scale_list } from '@/api/body'
import { getScaleInfo } from '@/api/dataFix'
import { query_patient } from '@/api/family'
import { ref, reactive } from 'vue'
import { throttle, deepCopy } from '@/utils/tools'
import store from '@/store'

const userInfo = ref({})
const patientInfo = ref({})
const show = ref(false)
const show2 = ref(false)
const diseaseList = ref([])
const systemList = ref([])
const patientList = ref([])
const integrity = ref(0)
const popTitle = ref('')

let currentId = ''

onLoad(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  patientInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
})

onShow(() => {
  if (!currentId || currentId !== patientInfo.value.empi) {
    currentId = deepCopy(patientInfo.value.empi)
    getData()
  }
})

const getData = () => {
  // currentId
  label_list(currentId).then((res) => {
    systemList.value = res.data ? res.data : []
  })
  query_patient(userInfo.value.userId).then((res) => {
    patientList.value = res.data
  })
}

const select = (item) => {
  patientInfo.value = item
  label_list(patientInfo.value.empi).then((res) => {
    systemList.value = res.data ? res.data : []
  })
  show2.value = false
}

const openModal = (index: any) => {
  diseaseList.value = systemList.value[index].list
  popTitle.value = systemList.value[index].name
  show.value = true
}

const toQuestion = () => {
  scale_list(currentId).then((res) => {
    if (res.code === 0) {
      if (res.data[0].isFinish) {
        uni.navigateTo({
          url:
            '/packA/pages/body/result?score=' +
            res.data[0].score +
            '&title=' +
            res.data[0].scaleName
        })
      } else {
        uni.navigateTo({ url: '/packA/pages/body/questionnaire' })
      }
    }
  })
}
const toHealthManage = () => {
  // uni.navigateTo({ url: '/packA/pages/healthPortrait/index' })
  uni.switchTab({
    url: '/pages/index/index'
  })
}
const fixData = () => {
  uni.navigateTo({ url: '/packA/pages/dataFix/index?notJump=1' })
}
const visitFun = () => {
  show2.value = true
}
const moreFun = () => {
  uni.navigateTo({ url: '/packA/pages/moreMessage/index?empi=' + patientInfo.value.empi })
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100vh;
  overflow: auto;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  position: relative;
  .notice_bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    padding: 0 24rpx;
    z-index: 10;
    font-weight: 400;
    font-size: 28rpx;
    color: #ff7d00;
    background: #fff7e8;
    .img_more {
      width: 32rpx;
      height: 32rpx;
      transform: translateY(6rpx);
    }
  }
  .img_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 512rpx;
    background: linear-gradient(180deg, #acebf2 0%, #f3f7f8 100%);
  }
  .top_tip {
    margin: 32rpx;
    height: 258rpx;
    position: relative;
    .top_bg {
      width: 100%;
      height: 258rpx;
    }
    .switch {
      position: absolute;
      right: 24rpx;
      top: 12rpx;
      .switch_text {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
      .switch_img {
        width: 32rpx;
        height: 32rpx;
        transform: translateY(8rpx);
      }
    }
    .base_info {
      position: absolute;
      top: 48rpx;
      left: 32rpx;
      display: flex;
      gap: 20rpx;
      .avatar {
        width: 84rpx;
        height: 84rpx;
      }
      .right_info {
        .baseinfo {
          margin-bottom: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          display: flex;
          gap: 20rpx;
          align-items: center;
          .name {
            font-weight: 500;
            font-size: 36rpx;
            color: #333333;
          }
          .relation {
            width: 80rpx;
            height: 40rpx;
            background: rgba(0, 209, 182, 0.05);
            border-radius: 4rpx;
            border: 1rpx solid #00d1b6;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            transform: rotateZ(360deg); //解决IOS下1rpx的边框缺失问题
            box-sizing: border-box;
            font-weight: 400;
            font-size: 24rpx;
            color: #00d1b6;
          }
        }
        .more {
          width: 148rpx;
          height: 40rpx;
          line-height: 40rpx;
          padding: 0 8rpx 0 16rpx;
          display: flex;
          align-items: center;
          background: rgba(0, 209, 182, 0.1);
          border-radius: 4rpx;
          box-sizing: border-box;
          margin-top: 16rpx;
          .more_text {
            display: inline-block;
            font-weight: 400;
            font-size: 24rpx;
            color: #00d1b6;
          }
          .more_img {
            width: 28rpx;
            height: 28rpx;
          }
        }
        .idcard {
          display: inline-block;
          height: 40rpx;
          line-height: 40rpx;
          padding: 0 20rpx;
          box-sizing: border-box;
          border-radius: 4rpx;
          border: 1rpx solid #e5e6eb;
          transform: rotateZ(360deg);
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
  .questionnaire {
    margin: 32rpx;
    position: relative;
    z-index: 2;
    .question_img {
      width: 686rpx;
      height: 126rpx;
    }
  }
  .record {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    position: relative;
    z-index: 2;
    margin: 0 32rpx;
    .tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      .title {
        font-weight: 600;
        font-size: 34rpx;
        color: #222222;
      }
      .source {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }
    .body_modal {
      width: 622rpx;
      height: 1000rpx;
      background: #f6fcfb;
      padding: 44rpx 16rpx;
      box-sizing: border-box;
      position: relative;
      .img_body {
        width: 400rpx;
        height: 910rpx;
        position: absolute;
        top: 40rpx;
        left: 50%;
        margin-left: -200rpx;
        z-index: 1;
      }
      .tags {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
        // .tag_item {
        //     flex: 0 0 50%;
        //     height: 64rpx;
        //     margin-bottom: 40rpx;
        //     .tag_name {
        //         display: inline-block;
        //         background: rgba(255,244,232,0.9);
        //         border-radius: 32rpx;
        //         border: 1px solid #FF813C;
        //         font-weight: 500;
        //         font-size: 28rpx;
        //         color: #FF813C;
        //         padding: 12rpx 32rpx;
        //         box-sizing: border-box;
        //     }
        // }
        // .tag_item:nth-child(even) {
        //     text-align: right;
        // }
        .tag_img {
          position: absolute;
        }
        .tag_name0 {
          width: 292rpx;
          height: 64rpx;
          top: 0;
          left: 0;
        }
        .tag_name1 {
          width: 284rpx;
          height: 64rpx;
          top: 0;
          right: 0;
        }
        .tag_name2 {
          width: 276rpx;
          height: 114rpx;
          top: 108rpx;
          left: 0;
          z-index: 2;
        }
        .tag_name3 {
          width: 264rpx;
          height: 112rpx;
          top: 60rpx;
          right: 0;
        }
        .tag_name4 {
          width: 258rpx;
          height: 64rpx;
          top: 204rpx;
          left: 0;
          z-index: 3;
        }
        .tag_name5 {
          width: 298rpx;
          height: 64rpx;
          top: 208rpx;
          right: 0;
        }
        .tag_name6 {
          width: 312rpx;
          height: 106rpx;
          top: 274rpx;
          left: 0;
          z-index: 4;
        }
        .tag_name7 {
          width: 200rpx;
          height: 76rpx;
          top: 304rpx;
          right: 0;
        }
        .tag_name8 {
          width: 292rpx;
          height: 164rpx;
          top: 328rpx;
          left: 0;
          z-index: 3;
        }
        .tag_name9 {
          width: 310rpx;
          height: 64rpx;
          top: 428rpx;
          right: 0;
        }
        .tag_name10 {
          width: 276rpx;
          height: 184rpx;
          top: 424rpx;
          left: 0;
          z-index: 2;
        }
        .tag_name11 {
          width: 260rpx;
          height: 130rpx;
          top: 550rpx;
          right: 0;
        }
        .tag_name12 {
          width: 272rpx;
          height: 82rpx;
          top: 658rpx;
          left: 0;
        }
        .tag_name13 {
          width: 238rpx;
          height: 64rpx;
          top: 678rpx;
          right: 0;
        }
      }
    }
  }
  .u-popup {
    .title {
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      border-bottom: 1px solid #e5e6eb;
    }
    .lists {
      max-height: 680rpx;
      padding: 32rpx;
      overflow: auto;
      .item {
        border-radius: 8rpx;
        padding: 32rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
        margin-bottom: 24rpx;
        display: flex;
        justify-content: flex-start;
        .line {
          width: 8rpx;
          height: 32rpx;
          margin-right: 16rpx;
          transform: translateY(6rpx);
        }
        .name {
          max-width: 480rpx;
        }
        .tag {
          height: 40rpx;
          line-height: 40rpx;
          font-weight: 500;
          font-size: 24rpx;
          border-radius: 4rpx;
          padding: 0 20rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          margin-left: 16rpx;
          transform: translateY(4rpx);
        }
      }
      .active {
        background: #f5f5ff;
        .line {
          background: #615de9;
        }
        .tag {
          color: #615de9;
          border: 1px solid #615de9;
        }
      }
      .high {
        background: #fff3f2;
        .line {
          background: #ff503d;
        }
        .tag {
          color: #ff503d;
          border: 1px solid #ff503d;
        }
      }
      .middle {
        background: #fff9f5;
        .line {
          background: #ff813c;
        }
        .tag {
          color: #ff813c;
          border: 1px solid #ff813c;
        }
      }
      .low {
        background: #f1fffa;
        .line {
          background: #0cb67c;
        }
        .tag {
          color: #0cb67c;
          border: 1px solid #0cb67c;
        }
      }
      .item:last-child {
        margin: 0;
      }
    }
    .lists_patient {
      padding: 32rpx;
      max-height: 800rpx;
      overflow: auto;
      .item {
        background: #fafafa;
        border-radius: 8rpx;
        padding: 24rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        position: relative;
        align-items: center;
        margin-bottom: 24rpx;
        .name {
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
        }
        .num {
          display: inline-block;
          background: #ffffff;
          border-radius: 4rpx;
          padding: 6rpx 24rpx 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          border: 1rpx solid #e5e6eb;
          background: #fff;
          transform: rotateZ(360deg);
          box-sizing: border-box;
          color: #666666;
          margin-left: 32rpx;
        }
        .select_img {
          position: absolute;
          top: 0;
          right: 0;
          width: 45rpx;
          height: 40rpx;
        }
      }
      .active {
        background: rgba(0, 209, 182, 0.1);
        border: 1rpx solid #00d1b6;
      }
    }
  }
  .fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #ffffff;
    .confirm_btn {
      width: 100%;
      background: #00d1b6;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  ::v-deep .u-icon__icon {
    font-size: 32rpx !important;
    line-height: 50rpx !important;
  }
}
</style>
